<template>
  <div class="sm-sman-smanagementGoods">
    <div class="sm-sman-leftInfo">
      <div>工作包信息</div>
      <ul>
        <li v-for="(value, index) in gzbInfo" :key="index">
          <p @click="deleteBtn(index)">x</p>
          <p>待入库物料信息</p>
          <p>
            图号：<span style="margin-left: 3px">{{ value.itemCode }}</span>
          </p>
          <p>
            物料名称：<span style="margin-left: 3px">{{ value.itemName }}</span>
          </p>
          <p>
            质量编号：<span style="margin-left: 3px">{{
              value.qualityCode
            }}</span>
          </p>
          <p>
            物料数量：<span style="margin-left: 3px">{{ value.outQty }}</span>
          </p>
          <!-- <p>
            待分拣数量：
            <span style="fontsize: 20px">
              <el-input
                @blur="blurNum(value.outQty, index)"
                ref="saomaInput"
                size="mini"
                v-model="value.outQty"
                placeholder="请输入物料数量"
              ></el-input>
            </span>
          </p> -->
        </li>
      </ul>
    </div>
    <div class="sm-sman-rightInfo">
      <div>缓存箱信息</div>
      <ul>
        <li v-for="(value, index) in hcxInfo" :key="index">
          <p>待入库物料信息</p>
          <p>
            图号：<span style="margin-left: 3px">{{ value.itemCode }}</span>
          </p>
          <p>
            物料名称：<span style="margin-left: 3px">{{ value.itemName }}</span>
          </p>
          <p>
            质量编号：<span style="margin-left: 3px">{{
              value.qualityCode
            }}</span>
          </p>
          <p>
            库存数量：<span style="margin-left: 3px">{{ value.itemQty }}</span>
          </p>
          <p>
            待分拣数量：
            <span style="fontsize: 20px">
              <el-input
                @blur="blurNum(value.outQty, index)"
                ref="smcsinput"
                size="mini"
                v-model="value.outQty"
                placeholder="请输入物料数量"
              ></el-input>
            </span>
          </p>
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
export default {
  name: "SortingManagementGoods",
  data() {
    return {
      hcxInfo: "",
      gzbInfo: "",
      qqlist: [],
      chengeOne:[]
    };
  },
  methods: {
    // input聚焦
    blurNum(num, index) {
      console.log(num, index);
      for (let i = 0; i < this.hcxInfo.length; i++) {
        this.qqlist = this.hcxInfo;
        if (index == i) {
          this.qqlist[i].outQty = num;
          this.chengeOne = this.qqlist[i]
        }
      }
      this.gzbInfo.push(this.chengeOne)
      this.$bus.$emit('CsGzbListInfo',this.gzbInfo)
      
    },
    // 工具包删除
    deleteBtn(index){
      this.gzbInfo.splice(index,1)
      this.$bus.$emit('CsGzbListInfo',this.gzbInfo)
      console.log(this.gzbInfo);
    }
  },
  mounted() {
      // 接收首页传来的缓存箱信息
      this.$bus.$on("smCsSendHcxInfos", (e) => {
        this.hcxInfo = e;
        console.log(e);
      });
      //
      this.$bus.$on("smCsSendGzbInfo", (e) => {
        this.gzbInfo = e;
      });
      // 接收首页物料扫码确认的下标 smsmaninput
      this.$bus.$on('smCsMaterialNumber',(e)=>{
        this.$nextTick(()=>{
          this.$refs.smcsinput[e].focus()
          console.log(this.$refs.smcsinput)
        }) 
      })
    }
}
</script>
<style scoped>
.sm-sman-smanagementGoods {
  width: 100%;
  /* background: red; */
}
.sm-sman-leftInfo {
  float: left;
  width: 50%;
  display: none;
  /* height: 300px; */
  /* border: 1px solid black; */
  /* background: #3375d7; */
}
.sm-sman-leftInfo ul li {
  float: left;
  padding: 0 10px;
  width: 280px;
  height: 220px;
  /* background-color: rgb(200, 244, 244); */
  background: #ffffff;
  border-radius: 4px;
  box-shadow: inset 0px 0px 20px 0px #cccbcb;
  margin-left: 12px;
  margin-top: 8px;
  /* text-align: center; */
  border-radius: 10px;
}
.sm-sman-leftInfo ul li p:nth-child(1) {
  text-align: center;
}
.sm-sman-leftInfo ul li p {
  margin-top: 10px;
}

.sm-sman-rightInfo {
  float: right;
  width: 50%;
  /* background-color: aquamarine; */
  /* height: 400px; */
  display: none;
}
.sm-sman-rightInfo ul li {
  float: left;
  padding: 0 5px;
  width: 290px;
  height: 220px;
  /* background-color: rgb(200, 244, 244); */
  background: #ffffff;
  border-radius: 4px;
  box-shadow: inset 0px 0px 20px 0px #cccbcb;
  margin-left: 12px;
  margin-top: 8px;
  /* text-align: center; */
  border-radius: 10px;
}
.sm-sman-rightInfo ul li p:nth-child(1) {
  text-align: center;
}
.sm-sman-rightInfo ul li p {
  margin-top: 10px;
}
.el-input {
  width: 150px;
  font-size: 18px;
}
</style>